<template>
	<view class="address">
		<view v-for="value in list" :key="value.id" @click="skipOrderDetail(value.id)">
			<main>
				<view>
					<view>
						<view>{{value.full_address}}</view>
						<p>{{value.username}}<span>{{value.mobile}}</span></p>
					</view>
				</view>
				<image @click.stop="amend(value)" src="../../../../static/user/65.png" mode="widthFix"></image>
			</main>
			<footer>
				<view>
					<span :class="{'span':id==value.id}" @click.stop='select(value.id,value.is_default)'></span>设置为默认地址
				</view>
				<image src="../../../../static/user/75.png" @click.stop="delAddress(value.id)" mode="widthFix"></image>
			</footer>
		</view>
		<button @click="skip('/pages/user/list/address/increased/increased?flag='+order_flag)">新增地址</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 1,
				list: [],
				order_flag: false,
			};
		},
		onShow() {
			uni.removeStorageSync('xgdz')
		},
		onLoad(option) {
			this.order_flag = Boolean(option.flag);
			this.getAddressList()
		},
		methods: {
			skip(url) {
				uni.redirectTo({
					url,
				})
			},
			skipOrderDetail(id) {
				if (this.order_flag) {
					uni.setStorageSync('xzdz', JSON.stringify(id))
					uni.navigateBack({
						delta: 1
					});
				}
			},
			amend(value) {
				uni.setStorageSync('xgdz', JSON.stringify(value))
				uni.navigateTo({
					url: '/pages/user/list/address/increased/increased'
				})
			},
			delAddress(id) {
				this.$httpRequest('/address/delAddress', {
					id
				}).then(() => {
					this.getAddressList()
				})
			},
			select(id, qx) {
				this.id = id
				console.log(qx)
				this.$httpRequest('/address/setDefaultAddress', {
					id,
					status: qx
				}).then(res => {
					this.getAddressList()
				})
			},
			getAddressList() {
				this.$httpRequest('/address/getAddressList').then(res => {
					this.list = res.data
					this.list.forEach(value => {
						if (value.is_default == 1) {
							this.id = value.id
						}
					})
				})
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
		},

	}
</script>

<style lang="less">
	.address {
		&>button {
			width: 690rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			color: #fff;
			position: fixed;
			bottom: 20rpx;
			left: 50%;
			transform: translateX(-50%);
			background: #5FC07B;
			font-size: 15px;
		}

		&>view {
			width: 690rpx;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 20rpx;
			box-sizing: border-box;
			color: #333;
			background: #fff;

			&>footer {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&>image {
					width: 30rpx;
					image-rendering: -moz-crisp-edges;
					image-rendering: -o-crisp-edges;
					image-rendering: -webkit-optimize-contrast;
					image-rendering: crisp-edges;
					-ms-interpolation-mode: nearest-neighbor;
				}

				&>view {
					font-size: 14px;
					color: #666666;
					display: flex;
					align-items: center;
					padding-top: 10rpx;

					&>.span {
						background: #6AB650;
					}

					&>span {
						width: 30rpx;
						height: 30rpx;
						background: #E1E1E1;
						border-radius: 50%;
						margin-right: 14rpx;
					}
				}
			}

			&>main {
				width: 100%;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #EDEDED;

				&>image {
					width: 36rpx;
					min-width: 36rpx;
					image-rendering: -moz-crisp-edges;
					image-rendering: -o-crisp-edges;
					image-rendering: -webkit-optimize-contrast;
					image-rendering: crisp-edges;
					-ms-interpolation-mode: nearest-neighbor;
				}

				&>view {
					display: flex;

					&>img {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						margin-right: 12rpx;
					}

					&>view {
						flex: 1;

						&>view {
							width: 100%;
							font-size: 13px;
							padding-right: 20rpx;
							box-sizing: border-box;
						}

						&>p {
							font-size: 11px;
							color: #666666;
							display: flex;
							margin-top: 8rpx;

							&>span {
								margin-left: 40rpx;
							}
						}
					}

				}
			}
		}
	}
</style>